<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="menuList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Name">
        <template slot-scope="scope">
          {{ scope.row.btName }}
        </template>
      </el-table-column>
      <el-table-column label="type" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="key" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.btKey }}
        </template>
      </el-table-column>
       <el-table-column
        prop="key"
        label="key" width="110">
      </el-table-column>
      <el-table-column class-name="status-col" label="查看子按钮" width="130" align="center">
          <el-button type="success" disabled>查看子按钮</el-button>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="删除" width="200">
          <el-button type="primary" icon="el-icon-edit"></el-button>
         <el-button type="primary"  @on-select="delMenu(scope.row)" icon="el-icon-delete"></el-button>
      </el-table-column>
    </el-table>
      <el-button type="primary"  @click="showEditMenu = true ">添加菜单</el-button>
      <EditMenu v-model="showEditMenu" @on-select="freshData"></EditMenu>
  </div>
</template>

<script>
import EditMenu from "./editmenu";
import { getList } from '@/api/table'
import request from "@/utils/request";
export default {
   components: {
     EditMenu
   },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      menuList :[],
      showEditMenu:false,
    }
  },
  created() {
    this.loadMenu();
  },
  methods: {
    freshData(val){
      if('success'===val){
        this.loadMenu();
      }
    },
    delMenu(val){
console.log(val)
    },
    loadMenu() {
      request({
        url: "/admin/menu/list",
        method: "post",
        data: {"appId": sessionStorage.getItem("currentApp")}
      }).then(res => {
        console.log(res);
        this.menuList = res.data;
        this.listLoading = false
      });
    }
  }
}
</script>
